<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">仓库管理</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/warehouseStock' }">
          <div class="div3">仓库列表</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <div class="div2">商品记录详情</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <div class="detail">
      <p class="header">商品详情</p>
      <div class="box">
        <div class="left">
          <img v-if="content.image" :src="ImgHttps + content.image" alt="空" />
          <img v-else src="../../../../assets/long1.png" />
        </div>

        <div class="right">
          <el-form
            :inline="true"
            ref="form"
            :model="queryForm"
            disabled
            size="mini"
          >
            <div class="title">
              <span>商品名称</span>
              <p>{{ queryForm.title }}</p>
            </div>
            <div class="stock">
              <el-form-item label="商品编号">
                <el-input v-model="queryForm.code"></el-input>
              </el-form-item>

              <el-form-item label="商品品牌">
                <el-input v-model="queryForm.brand"></el-input>
              </el-form-item>

              <el-form-item label="商品分类">
                <el-input v-model="queryForm.type"></el-input>
              </el-form-item>

              <el-form-item label="单价/规格">
                <el-input v-model="queryForm.price"></el-input>
              </el-form-item>
            </div>
            <div class="stock">
              <el-form-item label="实际库存">
                <el-input v-model="queryForm.sjWare"></el-input>
              </el-form-item>

              <el-form-item label="可用库存">
                <el-input v-model="queryForm.kyWare"></el-input>
              </el-form-item>

              <el-form-item label=" 总库存">
                <el-input v-model="queryForm.totalWare"></el-input>
              </el-form-item>

              <el-form-item label="入库仓库">
                <el-input v-model="queryForm.rkWare"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
    </div>

    <div class="table">
      <p class="header">记录</p>
      <el-form :inline="true" ref="form" :model="record" size="mini">
        <el-form-item label="相关信息">
          <el-input
            v-model="record.info"
            placeholder="请输入采购单号/采购人"
            value="ejri"
          ></el-input>
        </el-form-item>

        <el-form-item class="formItem" label="仓库名称">
          <el-select
            clearable
            v-model="record.wareName"
            placeholder="请选择仓库名称"
          >
            <el-option
              v-for="item in wareData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <div class="selectDate">
          <span>时间</span>
          <div class="picker">
            <el-date-picker
              v-model="record.date"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
			              <!-- @input="immediUpdate" -->
            </el-date-picker>
          </div>
        </div>
        <el-form-item>
          <el-button size="mini" type="primary" @click="searchEvent()"
            >搜索</el-button
          >
          <el-button size="mini" @click="resetEvent">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="tableContext">
      <el-table
        :data="tableData.list"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column label="序号" type="index" width="80"></el-table-column>
        <el-table-column prop="oddNumber" label="采购单号"></el-table-column>
        <el-table-column prop="handlerBy" label="采购人"></el-table-column>
        <el-table-column
          prop="createdTime"
          label="采购时间"
          min-width="120"
        ></el-table-column>
        <el-table-column prop="total" label="采购总数"></el-table-column>

        <el-table-column
          v-for="item in wareData"
          :key="item.id"
          prop="total"
          :label="item.name"
          width="100"
        >
          <template slot-scope="props">
            <div v-if="props.row.warehouses">
              <p v-for="val in props.row.warehouses" :key="val.warId">
                <span v-if="item.id == val.warId">{{ val.number }}</span>
                <span v-else>--</span>
              </p>
            </div>
            <span v-else>--</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页start -->
    <div class="page" v-if="tableData.totalNum > 0">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.totalNum"
          prev-text="上一页"
          next-text="下一页"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 分页end -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryForm: {
        title: "",
        code: "",
        brand: "",
        type: "",
        price: "",
        sjWare: "",
        kyWare: "",
        totalWare: "",
        rkWare: "",
      },
      record: {
        info: "",
        wareName: "",
        date: "",
      },
      wareData: [],
      tableData: [],
      multipleSelection: [],
      pageNo: 1,
      pageSize: 10,
      content: "",
    };
  },
  created() {
    this.wareList();
    this.goodsInfo(); //商品详情数据
    this.tablelist();
  },
  methods: {
    immediUpdate(e) {
      this.$nextTick(() => {
        if (e == null) {
          this.beginTime = "";
          this.endTime = "";
        } else {
          this.$set(this, "record.date", [e[0], e[1]]);
        }
      });
    },
    searchEvent() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.tablelist();
    },
    // 重置
    resetEvent() {
      this.record = {
        info: "",
        wareName: "",
        date: "",
      };
      this.pageNo = 1;
      this.pageSize = 10;
      this.tablelist();
    },
    // 记录列表
    tablelist() {
      let beginTime = "";
      let endTime = "";
      if (this.record.date) {
        beginTime = this.record.date[0] + " 00:00:00";
        endTime = this.record.date[1] + " 23:59:59";
      }
      this.axios
        .post(
          "/order/v1/purchase/inOrder/list",
          {
            endTime: endTime,
            goodsId: this.$route.query.id,
            keyWord: this.record.info,
            pageNo: this.pageNo,
            pageSize: this.pageSize,
            startTime: beginTime,
            type: this.$route.query.typeid, //1 商品 2赠品
            warNo: this.record.wareName,
          })
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.tableData = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 商品详情数据
    goodsInfo() {
      this.axios
        .get(
          "/order/v1/purchase/inOrder/goods?goodsId=" +
            this.$route.query.id +
            "&type=" +
            this.$route.query.typeid,
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          //   console.log(res);
          if (res.code == 0) {
            this.content = res.data;
            this.queryForm = {
              title: res.data.title,
              code: res.data.code,
              brand: res.data.brandName,
              type: res.data.typeName,
              price: res.data.price,
              sjWare: res.data.actualStock,
              kyWare: res.data.availableStock,
              totalWare: res.data.actualStock,
              rkWare: res.data.warContent,
            };
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 商品详情数据
    wareList() {
      this.axios
        .post("/order/comm/commWarehouse/list",{
        pageSize:999,
        pageNo:1
      }, {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.wareData = res.data.list.reverse();
          } else {
            this.$message.error(res.message);
          }
        });
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.tablelist();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.tablelist();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}

.div3 {
  margin-left: -8px;
  background: url(../../../../assets/breadcrumb3.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.header {
  color: #333;
  font-size: 14px;
}

.detail {
  padding: 10px;
  background-color: #fff;

  /deep/.el-input.is-disabled .el-input__inner {
    background: #f2f2f2;
    color: #666;
  }

  .box {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;

    .left {
      width: 80px;
      height: 80px;

      img {
        width: 80px;
        height: 80px;
      }
    }

    .right {
      margin-left: 10px;

      .title {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #666;
        font-size: 15px;
        margin-bottom: 10px;

        span {
          display: inline-block;
          width: 66px;
          white-space: nowrap;
        }

        p {
          padding-left: 10px;
          margin-left: 10px;
          background: #f2f2f2;
          width: 100%;
          height: 26px;
          line-height: 26px;
          border: 1px solid #d8dce5;
          border-radius: 5px;
          font-size: 12px;
        }
      }
    }
  }
}

.table {
  padding: 10px;
  padding-bottom: 0;
  background: #fff;
  margin-top: 10px;

  .selectDate {
    display: inline-block;
    margin-right: 20px;

    span {
      display: inline-block;
      font-size: 15px;
      margin-right: 15px;
      vertical-align: middle;
    }

    .picker {
      display: inline-block;
      vertical-align: middle;
    }

    /deep/.el-input__inner {
      width: 250px;
      height: 28px;
      line-height: 28px;
    }

    /deep/ .el-date-editor .el-range__icon {
      line-height: 23px;
    }

    /deep/ .el-date-editor .el-range-separator {
      line-height: 23px;
    }

    /deep/.el-date-editor .el-range__close-icon {
      line-height: 22px;
    }
  }
}

/deep/.el-tabs__header {
  margin: 0;
  background: #fff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

/deep/.el-table thead {
  color: #333;
}
.page {
  padding-right: 20px;
  text-align: right;
  width: 98%;
  position: fixed;
  bottom: 0;
  right: 0;
  background: #f5f5f5;
  z-index: 100;

  span {
    font-size: 15px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }

  /deep/.el-input--suffix .el-input__inner {
    background: #fff;
    color: #000;
    width: 104px;
    box-shadow: none;
  }
}
</style>
